@import 'gongshi.less';
.sh-head{
	width:100%;
	.px2rem(height,90);
	display: flex;
	justify-content:center;
	align-items:center;
	box-sizing: border-box;
	border-bottom:1px solid #e9e9e9;
	padding: 0 2%;
	.qux{
		.px2rem(width,80);
		.px2rem(height,67);
		text-align: center;
		cursor:pointer;
		color: #3d3d3d;
		.px2rem(font-size,28);
		.px2rem(line-height,67);
		.px2rem(letter-spacing,2);
		transform:translate(110/75*1rem);
		animation:cc 0.4s linear forwards;
	}
	.sh-search{
		flex:1;
		cursor:pointer;
		background: #ededed url(../images/fl-search.png)no-repeat left;
		.px2rem(background-size,30);
		.px2rem(background-position,170);
		border: none;
		.px2rem(font-size,28);
		.px2rem(border-radius,6);
		.px2rem(height,67);
		animation:aa 0.4s linear forwards;
		.px2rem(padding-left,200);
		box-sizing: border-box;
		&::placeholder{
			color: #a0a0a0;
			.px2rem(font-size,28);
			.px2rem(letter-spacing,3);
		}
	}
}
@keyframes cc{
	0%{
		transform:translate(110/75*1rem);
	}
	100%{
		transform:translate(0/75*1rem);
	}
}
@keyframes aa{
	0%{
		.px2rem(background-position,170);
		.px2rem(padding-left,200);
	}
	100%{
		.px2rem(background-position,25);
		.px2rem(padding-left,60);
	}
}
.box{
	position: fixed;
	width: 100%;
	height: 100%;
	.px2rem(top,90);
	background: #fff;
	z-index: 10;
	display: none;
	p{
		width: 100%;
		display: flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		span{
			width: 94%;
			color: #6f6f6f;
			.px2rem(height,92);
			.px2rem(font-size,28);
			.px2rem(letter-spacing,8);
			.px2rem(line-height,92);
			border-bottom: 1px solid #e9e9e9;
		}
	}
}
.sh-main{
	flex:1;
	display: flex;
	flex-direction:column;
	position: fixed;
	.px2rem(top,90);
	background: #f4f4f4;
	animation:bb 0.3s linear forwards;
	.zj{
		
		color: #8e8e8e;
		.px2rem(font-size,28);
		.px2rem(padding-top,30);
		.px2rem(padding-bottom,30);
		background: #fff;
		.px2rem(margin-bottom,30);
		.zj-top{
			padding: 0 2%;
			display: flex;
			justify-content:space-between;
			.zj-sc{
				cursor:pointer;
				.px2rem(font-size,45);
			}
		}
		.neia{
			padding: 0 2%;
			display: flex;
			flex-wrap:wrap;
			background: #fff;
			span{
				.px2rem(padding,12);
				.px2rem(border-radius,4);
				border:1px solid #bd4145;
				color: #ad1319;
				.px2rem(margin-top,22);
				.px2rem(margin-right,22);
				&:active{
					background:red;
					color: #fff;
				}
			}
		}
	}
	.sh-c{
		padding: 0 2%;
		color: #8e8e8e;
		.px2rem(font-size,28);
		.px2rem(padding-top,30);
		background: #fff;
	}
	.nei{
		padding: 0 2%;
		display: flex;
		flex-wrap:wrap;
		background: #fff;
		span{
			.px2rem(padding,12);
			.px2rem(border-radius,4);
			border:1px solid #bd4145;
			color: #ad1319;
			.px2rem(margin-top,22);
			.px2rem(margin-right,22);
			&:active{
				background:red;
				color: #fff;
			}
		}
	}
}
@keyframes bb{
	0%{
		top:100vh;
	}
	100%{
		.px2rem(top,90);
	}
}